@import "./variables.module.scss";

@mixin colorBtn($color) {
  background: $color;

  &:hover {
    color: $color;

    &:before,
    &:after {
      background: $color;
    }
  }
}
//一般
.blue-style {
  border-radius: 4px;
  border: 1px solid var(--Primary2-500, #007bff);
  background: var(--Primary2-50, #e5f2ff);
  color: var(--Primary2-500, #007bff);
  width: 64px;
  padding: 6px 8px;
}
//紧急
.yellow-style {
  border-radius: 4px;
  border: 1px solid var(--Primary6-500, #ffae00);
  background: var(--Primary6-50, #fff7e5);
  color: var(--Primary6-500, #ffae00);
  width: 64px;
  padding: 6px 8px;
}
//非常紧急
.better-style {
  border-radius: 4px;
  border: 1px solid var(--Primary7-500, #ff4d4f);
  background: var(--Primary7-50, #fff1f0);
  color: var(--Primary7-500, #e81212);
  width: 64px;
  padding: 6px 8px;
}

.el-button-primary {
  background: $--button-primary;
}
.del-button {
  color: #FF7B00 !important;
  padding: 0px;
}
.other-btn {
  color: #007BFF !important;
  padding: 0px;
}
.bottom-btns {
  // position: fixed;
  // bottom: 0;
  width: 100%;
  // border-left: 2px solid rgb(230, 230, 230);
  background: #fff;
  z-index: 10;
  // right: 0;
  .btns {
    height: 64px;
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6;
    position: relative;
    .btnList {
      display: inline-block;
    }
    .back-btn {
      display: inline-block;
      margin-left: 16px;
      .el-button {
        border-radius: 4px !important;
      }
    }
    button {
      padding: 0px 24px;
      line-height: 32px;
    }
  }
  .blue-btn {
    @include colorBtn($blue);
  }

  .light-blue-btn {
    @include colorBtn($light-blue);
  }

  .red-style {
    @include colorBtn($red);
  }

  .pink-btn {
    @include colorBtn($pink);
  }

  .green-btn {
    @include colorBtn($green);
  }

  .tiffany-btn {
    @include colorBtn($tiffany);
  }

  .yellow-btn {
    @include colorBtn($yellow);
  }

  .pan-btn {
    font-size: 14px;
    color: #fff;
    padding: 14px 36px;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: 600ms ease all;
    position: relative;
    display: inline-block;

    &:hover {
      background: #fff;

      &:before,
      &:after {
        width: 100%;
        transition: 600ms ease all;
      }
    }

    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      height: 2px;
      width: 0;
      transition: 400ms ease all;
    }

    &::after {
      right: inherit;
      top: inherit;
      left: 0;
      bottom: 0;
    }
  }

  .custom-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    color: #fff;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
  }
}
.btn-css{
  color: #b7bdc7;
  border: 1px solid #b7bdc7;
}